<template>
  <layoutPage v-if="!auditShow" class="details">
    <template #search>
      <el-descriptions class="basic-info">
        <template #title>
          <div class="title">
            <el-tag :type="status.colorType" size="small" effect="dark">
              {{ status.label }}
            </el-tag>
            <span>
              【ID:{{
                adjFundsInfo?.projectFundingAdjustRespVO?.id || route.query?.id
              }}】
            </span>
            <span>详情</span>
          </div>
        </template>
        <el-descriptions-item label="记录创建人：">
          {{ adjFundsInfo?.projectFundingAdjustRespVO?.creatorName }}
        </el-descriptions-item>
        <el-descriptions-item label="记录创建时间：">
          {{
            updateTime(
              adjFundsInfo?.projectFundingAdjustRespVO?.createTime,
              'YYYY-MM-DD HH:mm:ss'
            )
          }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
    <template #default>
      <el-tabs v-model="tabActive">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
          <component
            :is="tabComponents[item.name]"
            v-if="tabActive == item.name"
            :details-info="adjFundsInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </template>
  </layoutPage>
  <div v-else>
    <el-tabs v-model="tabActive">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <component
          :is="tabComponents[item.name]"
          v-if="tabActive == item.name"
          :details-info="adjFundsInfo"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
  import layoutPage from '@/components/layoutPage.vue'
  import { detailsInfoProps, resDetailsProps } from '../interface'
  import { getFundingAdjustDetails } from '@/api/project/researchFunds'
  import { useDictStore } from '@/store/modules/dict'
  import { useTimeFormat } from '@/utils/useTimeFormat'
  const route = useRoute()
  const { updateTime } = useTimeFormat()
  const _discStore = useDictStore()

  const adjFundsInfo = reactive<Partial<detailsInfoProps>>({})

  // 状态属性
  const status: any = computed(
    () =>
      _discStore.getDictForValue(
        'audit_status',
        adjFundsInfo?.projectFundingAdjustRespVO?.status
      ) || {
        colorType: 'info',
        label: '未开启',
      }
  )
  const tabActive = ref<string>('adjApplication')

  const tabList = [
    { label: '科技项目经费调整申请内容', name: 'adjApplication' },
    { label: '相关审核', name: 'process' },
  ]

  const tabComponents = {
    adjApplication: defineAsyncComponent(
      () => import('./components/adjApplication.vue')
    ),
    process: defineAsyncComponent(() => import('./components/process.vue')),
  }

  // 查询明细
  const handleSearchDetails = async (id: string, getType: number) => {
    try {
      const res: resDetailsProps = await getFundingAdjustDetails({
        id,
        getType,
      })
      if (res && res.data) {
        Object.assign(adjFundsInfo, res.data)
      } else {
        Object.assign(adjFundsInfo, {})
      }
    } catch (e) {
      console.error('查询项目经费调整申请详情异常', e)
      Object.assign(adjFundsInfo, {})
    }
  }
  // 是否由审核界面进入
  const auditShow = computed(() => route.query?.auditId)
  watch(
    () => route.query?.id,
    (id: string) => {
      if (id) {
        handleSearchDetails(id, 2)
      }
    },
    { immediate: true }
  )
</script>

<style lang="scss" scoped>
  .details {
    :deep(.el-tabs__content) {
      overflow: inherit;
    }
    :deep(.el-tabs__header) {
      margin: 0 0 20px;
    }
    :deep(.basic-info) {
      .title {
        display: inline-flex;
        align-items: center;
        font-size: 18px;
      }
      .el-descriptions__label {
        margin-right: 0px !important;
      }
      .el-descriptions__title {
        padding-left: 0px;
        border: none;
      }
    }
  }
</style>
